import React, { Component } from 'react'

export default class TodoList extends Component {
    state={
        //! 程序进来先获取本地存储的内容，如果有就赋值给状态；没有，则给状态赋值[] 
        list:JSON.parse(localStorage.getItem('todolist'))||[]
    }
    
    addItem=(e)=>{
        if(e.keyCode==13){
            let val=e.target.value;
            //! setState方法是异步的 
            this.setState({list:[val,...this.state.list]},()=>{
                //! 实现本地存储 
                localStorage.setItem('todolist',JSON.stringify(this.state.list));
            });
            //? 如果不想放在回调函数里，就别存this.state.list
            // localStorage.setItem('tolist',JSON.stringify([val,...this.state.list]))
            
            //  不建议对原状态进行更改
            //  this.state.list.unshift(val);
            //  this.setState({list:this.state.list});
            //  wrong: push返回的新数组的长度，这里是把新数组的长度4返回给了list 
            //  this.setState({list:this.state.list.unshift(val)})
            // !清空文本框内容
            e.target.value='';   
        }
    }
    //! 实现删除功能
    del=(idx)=>{
        console.log(idx);

                                                            //? 没有加上大括号，没有return 
        this.setState({list:this.state.list.filter((val,index)=>idx!=index)},()=>localStorage.setItem('todolist',JSON.stringify(this.state.list)))

        // this.setState({list:this.state.list.filter((val,index)=>{
        //     //! 过滤和idx下标不相等的数组，返回一个新数组
        //     return idx!=index;
        // })},()=>localStorage.setItem('todolist',JSON.stringify(this.state.list)))


        //! 第二种方法 
        // let newArr=this.state.list.filter((_,index)=>(idx!=index));
        // this.setState({list:newArr});
        // localStorage.setItem('todolist',JSON.stringify(newArr));
        // this.setState
        // this.state.list.slice(idx,1);
        // this.setState({list:this.state.list})
    }
    render() {
        const {list}=this.state;

        return (
            <div>
                <input 
                    onKeyUp={this.addItem}
                />
                <h2>正在进行的条数：{list.length}</h2>
                <ul>
                    {           //内容   索引
                        list.map((item,index)=>(
                                        <li>
                                            <input type='checkbox'/>
                                            {item}
                                            ---<button onClick={()=>this.del(index)}>删除</button>
                                        </li>
                                        )
                                )
                    }
                </ul>
            </div>
        )
    }
}
